@charset "UTF-8";

@import url(../../../../css/mobile/normalize.css);
@import url(../../../../css/mobile/components/alert.css);
@import url(../../../../css/mobile/components/login.css);

@font-face {
  font-weight: normal;
  font-style: normal;
  font-family: 'VarelaRound-Regular';
  src: url(../../../../fonts/mobile/VarelaRound-Regular.eot);
  src: url(../../../../fonts/mobile/VarelaRound-Regular.eot) format('embedded-opentype'),
       url(../../../../fonts/mobile/VarelaRound-Regular.woff) format('woff'),
       url(../../../../fonts/mobile/VarelaRound-Regular.ttf) format('truetype'),
       url(../../../../fonts/mobile/VarelaRound-Regular.svg) format('svg');
}

html, body {
  font-family: "VarelaRound-Regular", "PingFang SC", "Microsoft YaHei";
}

body {
  overflow: hidden;
  font-size: 16px;
  background: #32CDFF;
}

.container {
  height: 100vh;
  background: #32CDFF;
  margin-bottom: 0.2rem;

  .card-1 {
    position: absolute;
    top: 0.42rem;
    left: 0.2rem;
    right: 0.2rem;
    bottom: 0.2rem;
    background: #fff;
    border-radius: 0.08rem;
    box-shadow: 0 0 0.10rem 0 rgba(14, 99, 127, 0.2);

    &:before, &:after {
      position: absolute;
      top: 0.89rem;
      content: '';
      width: 0.28rem;
      height: 0.16rem;
      background: #32CDFF;
    }
    &:before {
      left: -0.20rem;
      border-top-right-radius: 0.08rem;
      border-bottom-right-radius: 0.08rem;
      box-shadow: -0.18rem 0 0.1rem -0.18rem rgba(14, 99, 127, 0.2) inset;
    }
    &:after {
      right: -0.20rem;
      border-top-left-radius: 0.08rem;
      border-bottom-left-radius: 0.08rem;
      box-shadow: 0.18rem 0 0.1rem -0.18rem rgba(14, 99, 127, 0.2) inset;
    }

    .avatar {
      margin-top: -0.3rem;
      text-align: center;
      line-height: 0;

      img {
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 50%;
      }
    }
    .nickname {
      margin-top: 0.08rem;
      height: 0.24rem;
      line-height: 0.24rem;
      font-size: 0.2rem;
      color: #282B31;
      text-align: center;
    }
    .title {
      margin-top: 0.04rem;
      height: 0.2rem;
      line-height: 0.2rem;
      font-size: 0.16rem;
      color: #676C75;
      text-align: center;

      .day {
        color: #32CDFF;
      }
    }
    .split-line-1 {
      height: 1px;
      border-bottom: 1px dashed rgba(50, 205, 255, .3);
      margin: 0.11rem 0.2rem 0 0.2rem;
    }
    .banner {
      margin: 0.12rem 0.2rem 0 0.2rem;
      height: 1.5rem;
      text-align: center;
      position: relative;
      line-height: 0;
      overflow: hidden;
      border-radius: 0.1rem;

      img {
        width: 100%;
        height: auto;
      }

      &::after {
        position: absolute;
        top: 0.08rem;
        right: 0;
        height: 0.24rem;
        padding: 0 0.06rem;
        line-height: 0.265rem;
        z-index: 1;
        content: attr(date-text);
        background: #FF9A3A;
        font-size: 0.14rem;
        color: #FFFFFF;
        text-align: center;
        border-radius: 1rem 0 0 1rem;
      }
    }
    .description {
      margin: 0.16rem 0.2rem 0 0.2rem;

      height: 0.4rem;
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: #676C75;
      text-align: center;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;

      span {
        color: #282B31;
      }
    }
    .progress {
      margin-top: 0.24rem;
      text-align: center;
      height: 0.56rem;

      .day, .lesson, .exercise {
        display: inline-block;
        width: 0.8rem;
        height: auto;
        line-height: 0;
      }
      .progress-title {
        font-size: 0.12rem;
        color: #676C75;
        height: 0.17rem;
        line-height: 0.17rem;
      }
      .count {
        margin-top: 0.02rem;
        font-size: 0.2rem;
        color: #4B4F57;
        height: 0.24rem;
        line-height: 0.24rem;
      }
      .progress-bar-bg {
        margin-top: 0.08rem;
        position: relative;
        width: 0.6rem;
        height: 0.05rem;
        line-height: 0.05rem;
        display: inline-block;
        background: #F2F3F4;
        border-radius: 0.05rem;
        overflow: hidden;

        .progress-bar {
          display: inline-block;
          position: absolute;
          left: 0;
          width: 0%;
          height: 100%;
        }
      }
      .day > .progress-bar-bg > .progress-bar {
        background: linear-gradient(to right, #FC6679, #FDC581);
        -webkit-transition: width 0.7s linear 0s;
        transition: width 0.7s linear 0s;
      }
      .lesson > .progress-bar-bg > .progress-bar {
        background: linear-gradient(to right, #47E3FF, #52A3FC);
        -webkit-transition: width 0.7s linear 0s;
        transition: width 0.7s linear 0s;
      }
      .exercise > .progress-bar-bg > .progress-bar {
        background: linear-gradient(to right, #BDF66D, #BADE38);
        -webkit-transition: width 0.7s linear 0s;
        transition: width 0.7s linear 0s;
      }
      .dot {
        display: inline-block;
        height: 0.56rem;
        width: 0.28rem;
        vertical-align: top;
        position: relative;

        span {
          position: absolute;
          width: 0.03rem;
          height: 0.03rem;
          left: 0.12rem;
          background-color: #E7E8EA;
          border-radius: 50%;

          &:nth-child(1) {
            top: 0.21rem;
          }
          &:nth-child(2) {
            top: 0.3rem;
          }
          &:nth-child(3) {
            top: 0.38rem;
          }
        }
      }
    }
    .split-line-2 {
      height: 1px;
      border-bottom: 1px dashed rgba(50, 205, 255, .3);
      margin: 0.15rem auto 0 auto;
    }
    .share-qrcode {
      display: block;
      line-height: 0;
      text-align: center;

      img {
        width: 280%*100/335;
        height: 280%*100/335;
        vertical-align: middle;
      }
    }
    .button {
      position: absolute;
      left: 50%;
      margin-left: -1.275rem;
      bottom: 0.2rem;
      text-align: center;

      button {
        width: 2.55rem;
        background: #FF5B34;
        border-radius: 1rem;
        height: 0.54rem;
        font-size: 0.16rem;
        color: #FFFFFF;
        text-align: center;
        outline: none;
        border: 0;
      }
    }
  }

  .card-2 {
    position: absolute;
    top: 0.42rem;
    left: 0.2rem;
    right: 0.2rem;
    bottom: 0.2rem;
    background: #fff;
    border-radius: 0.08rem;
    box-shadow: 0 0 0.10rem 0 rgba(14, 99, 127, 0.2);

    &:before, &:after {
      position: absolute;
      top: 2.11rem;
      content: '';
      width: 0.28rem;
      height: 0.16rem;
      background: #32CDFF;
    }
    &:before {
      left: -0.20rem;
      border-top-right-radius: 0.08rem;
      border-bottom-right-radius: 0.08rem;
      box-shadow: -0.18rem 0 0.1rem -0.18rem rgba(14, 99, 127, 0.2) inset;
    }
    &:after {
      right: -0.20rem;
      border-top-left-radius: 0.08rem;
      border-bottom-left-radius: 0.08rem;
      box-shadow: 0.18rem 0 0.1rem -0.18rem rgba(14, 99, 127, 0.2) inset;
    }

    .avatar {
      margin-top: -0.3rem;
      text-align: center;
      line-height: 0;

      img {
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 50%;
      }
    }
    .nickname {
      margin-top: 0.08rem;
      height: 0.24rem;
      line-height: 0.24rem;
      font-size: 0.2rem;
      color: #282B31;
      text-align: center;
    }
    .title {
      margin-top: 0.04rem;
      height: 0.48rem;
      line-height: 0.2rem;
      font-size: 0.16rem;
      color: #676C75;
      text-align: center;

      .day {
        color: #32CDFF;
      }

      .desc {
        color: #4B4F57;
        font-weight: bold;
      }
    }

    .progress {
      margin-top: 0.24rem;
      text-align: center;
      height: 0.56rem;

      .day, .lesson, .exercise {
        display: inline-block;
        width: 0.8rem;
        height: auto;
        line-height: 0;
      }
      .progress-title {
        font-size: 0.12rem;
        color: #676C75;
        height: 0.17rem;
        line-height: 0.17rem;
      }
      .count {
        margin-top: 0.02rem;
        font-size: 0.2rem;
        color: #4B4F57;
        height: 0.24rem;
        line-height: 0.24rem;
      }
      .progress-bar-bg {
        margin-top: 0.08rem;
        position: relative;
        width: 0.6rem;
        height: 0.05rem;
        line-height: 0.05rem;
        display: inline-block;
        background: #F2F3F4;
        border-radius: 0.05rem;
        overflow: hidden;

        .progress-bar {
          display: inline-block;
          position: absolute;
          left: 0;
          width: 0%;
          height: 100%;
        }
      }
      .day > .progress-bar-bg > .progress-bar {
        background: linear-gradient(to right, #FC6679, #FDC581);
        -webkit-transition: width 0.7s linear 0s;
        transition: width 0.7s linear 0s;
      }
      .lesson > .progress-bar-bg > .progress-bar {
        background: linear-gradient(to right, #47E3FF, #52A3FC);
        -webkit-transition: width 0.7s linear 0s;
        transition: width 0.7s linear 0s;
      }
      .exercise > .progress-bar-bg > .progress-bar {
        background: linear-gradient(to right, #BDF66D, #BADE38);
        -webkit-transition: width 0.7s linear 0s;
        transition: width 0.7s linear 0s;
      }
      .dot {
        display: inline-block;
        height: 0.56rem;
        width: 0.28rem;
        vertical-align: top;
        position: relative;

        span {
          position: absolute;
          width: 0.03rem;
          height: 0.03rem;
          left: 0.12rem;
          background-color: #E7E8EA;
          border-radius: 50%;

          &:nth-child(1) {
            top: 0.21rem;
          }
          &:nth-child(2) {
            top: 0.3rem;
          }
          &:nth-child(3) {
            top: 0.38rem;
          }
        }
      }
    }

    .split-line-1 {
      height: 1px;
      border-bottom: 1px dashed rgba(50, 205, 255, .3);
      margin: 0.24rem 0.2rem 0 0.2rem;
    }

    .share-qrcode {
      margin-top: 0.08rem;
      display: block;
      line-height: 0;
      text-align: center;

      img {
        width: 2.15rem;
        vertical-align: middle;
      }
    }

    .button {
      position: absolute;
      left: 50%;
      margin-left: -1.275rem;
      bottom: 0.2rem;
      text-align: center;

      button {
        width: 2.55rem;
        background: #FF5B34;
        border-radius: 1rem;
        height: 0.54rem;
        font-size: 0.16rem;
        color: #FFFFFF;
        text-align: center;
        outline: none;
        border: 0;
      }
    }
  }

  .link {
    .banner {
      height: 1.57rem;

      img {
        width: auto;
        height: 100%;
      }
    }
    .description {
      margin-top: 0.09rem;
    }
  }


}

.share-link {
  position: fixed;
  display: block;
  bottom: 0;
  width: 100%;
  height: 1.1rem;
  background-color: #FF5B34;

  img {
    width: 100%;
    height: 100%;
  }
}

.share-mask {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1003;
  overflow: hidden;
  display: none;
}

.share-arrow {
  background-size: 1.74rem 1.21rem;
  background-image: url('../../../../mobile/campaign/achievement/img/share_timeline.png');
  background-repeat: no-repeat;
  width: 1.74rem;
  height: 1.21rem;
  position: absolute;
  top: 0;
  right: 0.6rem;
}

.msgbox-mask {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1003;
  overflow: hidden;

  .msgbox {
    width: 2.95rem;
    margin: 35% auto 0 auto;
    background-color: white;
    border-radius: 0.08rem;
    position: relative;
    text-align: center;
    z-index: 1004;
    line-height: 0;

    .head {
      width: 100%;
      height: 0.8rem;
    }

    .msgbox-title {
      margin-top: 0.16rem;
      font-size: 0.18rem;
      color: #282B31;
      text-align: center;
      height: 0.25rem;
      line-height: 0.25rem;
      font-family: "PingFangSC-Medium";
    }

    .msgbox-content {
      margin-top: 0.16rem;
      font-size: 0.16rem;
      color: #676C75;
      height: 0.22rem;
      line-height: 0.22rem;
    }

    .ticket {
      width: 2.5rem;
      height: 0.82rem;
      margin: 0.08rem auto 0 auto;
      overflow: hidden;
      position: relative;

      .left {
        display: inline-block;
        vertical-align: top;
        width: 0.6rem;
        height: 0.8rem;
        line-height: 0.8rem;
        color: #32CDFF;
        font-size: 0.24rem;
        border-left: 0.04rem solid #32CDFF;
        border-top: 0.01rem solid #32CDFF;
        border-right: 0.01rem dashed #32CDFF;
        border-bottom: 0.01rem solid #32CDFF;

        &:before {
          content: '¥';
        }
      }
      .right {
        display: inline-block;
        vertical-align: top;
        width: 1.66rem;
        height: 0.8rem;
        border-left: 0;
        border-top: 0.01rem solid #32CDFF;
        border-right: 0.01rem solid #32CDFF;
        border-bottom: 0.01rem solid #32CDFF;
        text-align: left;

        .ticket-name {
          font-size: 0.18rem;
          color: #282B31;
          line-height: 0.55rem;
          margin-left: 0.16rem;
        }

        .ticket-time {
          font-size: 0.12rem;
          color: #999EA8;
          margin-left: 0.16rem;

          &:before {
            content: '有效期至';
          }
        }
      }

      &:before, &:after {
        position: absolute;
        left: 0.68rem;
        display: inline-block;
        width: 0.1rem;
        height: 0.1rem;
        content: '';
        background-color: #FFF;
        border-radius: 50%;
        border: 0.01rem solid #32CDFF;
        z-index: 1;
      }

      &:before {
        top: -0.05rem;
      }
      &:after {
        bottom: -0.05rem;
      }
    }

    .thank {
      margin-top: 0.16rem;
      border-top: 1px solid rgba(231,232,234,.5);
      height: 0.57rem;
      line-height: 0.57rem;
      color: #32CDFF;
      font-size: 0.18rem;
      text-align: center;
    }
  }
}

@media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
  .container {
    .card {
      bottom: calc(0.2rem + constant(safe-area-inset-bottom));
      bottom: calc(0.2rem + env(safe-area-inset-bottom));

      .avatar {
        margin-top: -0.35rem;

        img {
          width: 0.7rem;
          height: 0.7rem;
        }
      }
      .nickname {
        margin-top: 0.16rem;
      }
      .title {
        margin-top: 0.08rem;
      }
      .split-line-1 {
        margin: 0.15rem 0.2rem 0 0.2rem;
      }
      .banner {
        margin: 0.16rem 0.2rem 0 0.2rem;
        height: 1.83rem;

        &::after {
          height: 0.29rem;
        }
      }
      .progress {
        margin-top: 0.32rem;

        .count {
          margin-top: 0.08rem;
        }

        .progress-bar {
          height: 0.06rem;
        }
      }
      .split-line-2 {
        margin: 0.23rem 0.2rem 0 0.2rem;
      }
    }
  }
  .share-link {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}